<template>
<div class="app-container calendar-list-container">
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-steps :active="active" finish-status="success" class="steps">
        <el-step title="基本信息"></el-step>
        <el-step title="商品详情"></el-step>
        <el-step title="商品规格"></el-step>
      </el-steps>
      <div class="baseInfo" v-if="active==0">
        <el-form-item label="商品名称" prop="name">
            <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="短标题" prop="simpleTitle">
            <el-input placeholder="请输入短标题" v-model="form.simpleTitle"></el-input>
        </el-form-item>
        <el-form-item label="长标题" prop="title">
            <el-input placeholder="请输入长标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="卖点" prop="salesPromotion">
            <el-input placeholder="请输入卖点" v-model="form.salesPromotion"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload class="avatar-uploader" :limit="maxLimitNum" name="imageFile" list-type="picture-card" :disabled="isDisabled" :auto-upload="true"
            :headers="requestHeader" :action="uploadImgUrl" :show-file-list="true" :on-success="handleAvatarSuccess" :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload" :data="uploadParam" accept="image/jpeg,image/png"
            :file-list="uploadFileList">
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
        <el-form-item label="店铺" prop="mkCategoryCode">
            <el-select :disabled="true" class="filter-item" v-model="form.shopId" placeholder="请选择店铺" @change="shopChange">
              <el-option   v-for="item in  shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="mkCategoryCode">
            <el-cascader 
            :options="categoryOptions"
            ref="goodCate" 
            @change="onCategoryChange" 
            :show-all-levels="false" 
            change-on-select 
            v-model="categoryCode" 
            value="code" 
            :props="props"></el-cascader>
        </el-form-item>
          <el-form-item label="分组" prop="MkshopGrouptionsVal">
          <el-select v-model="shopGrouptionsVal" multiple filterable  placeholder="请选择分组" >
         <el-option  v-for="item in shopGrouptions"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupId"
         >
        </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="付款方式" prop="onlyPayMethod">
            <el-select class="filter-item" v-model="form.onlyPayMethod" placeholder="请选择付款方式">
              <el-option v-for="item in  payMethodOptions" :key="item.picklistValue" :label="item.picklistText" :value="item.picklistValue"> </el-option>
            </el-select>
        </el-form-item>        
        <!-- <el-form-item label="原价（元）" prop="oringinalPrice">
            <el-input placeholder="请输入原价" v-model.number="form.oringinalPrice"></el-input>
        </el-form-item>
        <el-form-item label="现价（元）" prop="currentPrice">
            <el-input placeholder="请输入现价" v-model.number="form.currentPrice"></el-input>
        </el-form-item> -->
       <el-form-item label="状态*">
            <el-select class="filter-item" v-model="form.status" clearable placeholder="请选择状态">
               <el-option v-for="item in statusArray"  :key="item.value" :label="item.label" :value="item.value">
               </el-option>
            </el-select>
        </el-form-item>
      </div>
      <div class="goodDesc" v-if="active ==1">
        <el-form-item prop="description">
            <quill-editor v-model="form.description" class="editor" ref="myQuillEditor" :options="editorOption">
            </quill-editor>
            <el-upload style="display:none" :headers="requestHeader" :action="uploadImgUrl" :show-file-list="false" :before-upload='newEditorbeforeupload'  :on-success='newEditorSuccess'
               :data="uploadParam" name="imageFile"  ref="uniqueId" id="uniqueId">
            </el-upload >
        </el-form-item>
      </div>
      <div class="goodSpec" v-if="active ==2">
        <div class="filter-container">
          <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit" @click="addGoodSpec">新增规格</el-button> -->
        </div>
        <el-card class="box-card">
           <table class="gridtable">
            <thead>
              <tr>
                <th>规格名称</th>
                <th>规格值</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <el-select
                    v-model="modelAttrId"
                    filterable
                    @change="remoteMethod"
                    @visible-change="initialize"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="attrValueId"
                    multiple
                    filterable
                    allow-create
                    @visible-change="initializeEs"
                    @change="remoteMethode(attrValueId)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger"></el-button>
                </td>
              </tr>
            </tbody>

            <!-- ------------------------------------------------------ -->

            <tbody>
              <tr>
                <td>
                  <el-select
                    v-model="modelAttrIde"
                    filterable
                    @change="remoteMethod_a"
                    @visible-change="initialize_a"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options_a"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="attrValueIde"
                    multiple
                    filterable
                    allow-create
                     @visible-change="initializeEs_a"
                    @change="remoteMethode_a(attrValueIde)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones_a"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger" ></el-button>
                </td>
              </tr>
            </tbody>
            <!-- ------------------------------------------------------------------ -->

            <tbody>
              <tr>
                <td>
                  <el-select
                    v-model="modelAttrIdes"
                    filterable
                     @change="remoteMethod_b"
                    @visible-change="initialize_b"
                    allow-create
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options_b"
                      :key="item.modelAttrId"
                      :label="item.modelAttrName"
                      :value="item.modelAttrName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="attrValueIdes"
                    multiple
                    filterable
                    allow-create
                    @visible-change="initializeEs_b"
                    @change="remoteMethode_b(attrValueIdes)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optiones_b"
                      :key="item.attrValueId"
                      :label="item.attrValueName"
                      :value="item.attrValueName"
                    ></el-option>
                  </el-select>
                </td>
                <td>
                  <el-button type="danger"></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-card>
        <!-- <good-spec v-for="(item,index) in allComponents" :key="index" :index="index" @remove="remove" :items="allComponents" @uploadData="getData" ref="child"></good-spec> -->
      <br>
      <el-form-item label="规格图片">
          <el-upload
          class="avatar-uploader"
           
            name="imageFile"
            list-type="picture-card"
            :disabled="isDisableds"
            :auto-upload="true"
            :headers="requestHeader"
            :action="uploadImgUrl"
            :show-file-list="true"
            :on-success="handleAvatarSuccesss"
            :on-remove="handleRemoves"
            :before-upload="beforeAvatarUploads"
            :data="uploadParam"
            accept="image/jpeg, image/png"
            :file-list="uploadFileLists"
            :class="{hide:hideUploadEdit}"
            :on-change="handleEditChange"
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
        <table class="gridtable">
          <thead>
            <tr>
              <th>{{modelAttrId}}</th>
              <th>{{modelAttrIde}}</th>
              <th>{{modelAttrIdes}}</th>
              <th>划线价*</th>
              <th>在售价*</th>
              <th>成本价*</th>
              <th>库存*</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for=" (item,index) in tableDataList" :key="index">
              <td v-if="item.trE==''"></td>
              <td v-else v-text="item.trE"></td>
              <td v-if="item.trE==''"></td>
              <td v-else v-text="item.trEs"></td>
              <td v-if="item.trE==''"></td>
              <td v-else v-text="item.trEsk"></td>
              <td>
                <el-input
                  type="number"
                  v-model.number="price[index]"
                  @blur="testUser(price[index])"
                ></el-input>
              </td>
                  <td>
                <el-input
                  type="number"
                  v-model.number="memberPrice[index]"
                  @blur="testUser_a(memberPrice[index])"
                ></el-input>
              </td>
              <td>
                <el-input
                  type="number"
                  v-model.number="menchantPrice[index]"
                  @blur="testUser_b(menchantPrice[index])"
                ></el-input>
              </td>
              <td>
                <el-input
                  type="number"
                  v-model.number="stockQuantity[index]"
                  @blur="testUser_c(stockQuantity[index])"
                ></el-input>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </el-form>
  <div slot="footer" align="center" class="footerBtn">
      <el-button  type="primary" v-if="active==1 || active==2" @click="prev">上一步</el-button>
      <el-button type="primary" v-if="active==0 || active==1" @click="next">下一步</el-button>
      <el-button type="primary" v-if="active==2" @click="create('form')" :loading="loading">提  交</el-button>
  </div>
</div>
</template>

<script>
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj,
  getByModelList,
  addGoodsModel,
  selectByGoodsModelVal,
  addGoodsModelVal
} from "api/shop/goods/goods/index";
import {getPicklist} from 'api/param/picklist/index';
import {getAllShopList} from 'api/shop/shops/index';
import { getToken } from 'utils/auth';
import { fetchTree } from 'api/shop/goods/category/index';
import { goodsGroup } from 'api/shop/goods/group/index';
import { mapGetters } from 'vuex';
import goodSpec from './components/goodSpec.vue'
export default {
  name: 'addGoods',
  components: {
    'good-spec' :goodSpec
  },
  data() {
    return {
      options: [],
      modelS: [],

      optiones: [],
      modelValS: [],
      //--------------------------
      options_a: [],
      modelS_a: [],

      optiones_a: [],
      modelValS_a: [],
      //--------------------------
      options_b: [],
      modelS_b: [],

      optiones_b: [],
      modelValS_b: [],
      //-----------------------
      hideUploadEdit: false,
      specPicture: false,
       priceShow: false,
      memberPriceShow: false,
      menchantPriceShow: false,
      stockQuantityShow: false,
    tableDataList: [{ trE: undefined, trEs: undefined, trEsk: undefined }],

      active: 0,
      uploadImgUrl: this.GLOBAL.uploadImgUrl,
      uploadParam:{"useType":"goods"},
      requestHeader:{"token":getToken()},
      picklistCode:'payMethod',
      imageUrl:'',
      imageUrls: "",
      imgs:[],
      imgss:[],
      specs:[],
      uploadFileList:[],
      uploadFileLists: [],
      allComponents: [],
      categoryCode:[],
      maxLimitNum:6,
      maxLimitNums:0,
      isDisabled:false,
      isDisableds:false,
      categoryOptions:[],
      shopOptions:[],
      listQuery: {
        shopId: undefined
      },
      payMethodOptions:[
        {"picklistValue":0,"picklistText":"不限制"},
        {"picklistValue":1,"picklistText":"在线支付"},
        {"picklistValue":2,"picklistText":"到店支付"},
        {"picklistValue":3,"picklistText":"货到付款"},
      ],
      loading: false,
      props:{
        value: 'code',
        label:'name',
      },
      shopGrouptions:[],
      shopGrouptionsVal:[],
      statusArray:[
         {
           value:'1',
           label:'上架'
         },
         {
           value:'-1',
           label:'下架'
         },
         {
           value:'0',
           label:'库存'
         }
       ], //状态数组
        modelAttrId: undefined,
        modelAttrIde: undefined,
        modelAttrIdes: undefined,
        attrValueId: [],
        attrValueIde: [],
        attrValueIdes: [],
        price: [],
        memberPrice: [],
        menchantPrice: [],
        stockQuantity: [],
      form:{
        goodsId:undefined,
        name:undefined,
        simpleTitle:undefined,
        title:undefined,
        mkCategoryCode:undefined,
        categoryName:undefined,
        oringinalPrice:undefined,
        currentPrice:undefined,
        description:undefined,
        categoryName:undefined,
        specName:undefined,
        stockNum:undefined,
        status:undefined,
        netWeight:undefined,
        netWeightUnit:undefined,
        price: [],
        memberPrice: [],
        menchantPrice: [],
        stockQuantity: [],
        onlyPayMethod:undefined,
        shopId:undefined,
        formPrice:undefined,
        formMemberPrice:undefined,
        formMenchantPrice:undefined,
        formNetWeight:undefined,
        goodImgs:[],
        goodsSpecImgs: [],
        goodSpecs:[],
        salesPromotion:undefined,
        shopGrouptionsValForm:[],
        modelAttrId: undefined,
        modelAttrIde: undefined,
        modelAttrIdes: undefined,
        attrValueId: [],
        attrValueIde: [],
        attrValueIdes: [],
        modelAttrName: undefined
      },
       goodsModel: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModelByList:{
        modelAttrName:undefined,
        shopId:undefined
      },
        goodsModelByList_a:{
        modelAttrName:undefined,
        shopId:undefined
      },
       goodsModelByList_b:{
        modelAttrName:undefined,
        shopId:undefined
      },
      goodsModel_a: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModel_b: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModelVal: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelVal_a: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelVal_b: {
        attrValueId: undefined,
        attrValueName: [],
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelValCondition: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      goodsModelValCondition_a: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      goodsModelValCondition_b: {
        //查询条件
        attrValueName: undefined,
        shopId:undefined
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }
        ],
        simpleTitle: [
          {
            required: true,
            message: '请输入短标题',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 200,
            message: '长度在 1 到 200 个字符',
            trigger: 'blur'
          }
        ],
        title: [
          {
            required: true,
            message: '请输入长标题',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 400,
            message: '长度在 1 到 400 个字符',
            trigger: 'blur'
          }
        ],
      },
      editorOption: {
        placeholder: '',
        theme: 'snow',  // snow or 'bubble'
        modules: {
          toolbar: {
              container:[
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video']
            ],
            handlers:{
              'image': function (value) {
                  if (value) {
                    var fileInput =document.querySelector('#uniqueId input') //隐藏的file元素
                    fileInput.click() //触发事件
                  }else{
                    this.quill.format('image', false);
                  }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  watch: {
    "attrValueId": function(newValue, oldValue) {
      if (
        this.attrValueId != undefined &&
        this.attrValueId.length > 0
      ) {
        this.maxLimitNums=this.attrValueId.length;  
        this.specPicture = true;
      } else {
        this.specPicture = false;
      }
      this.tableDataList = [];
      if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            for (var k = 0; k <  this.attrValueIdes.length; k++) {
              // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              let newObj = {};
              newObj.trE =  this.attrValueId[i];
              newObj.trEs =  this.attrValueIde[j];
              newObj.trEsk =  this.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var k = 0; k <  this.attrValueIdes.length; k++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          let newObj = {};
          newObj.trE =  this.attrValueId[i];
          newObj.trEs =  this.attrValueIde[j];
          newObj.trEsk =  this.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    },
    "attrValueIde": function(newValue, oldValue) {
      this.tableDataList = [];
      if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            for (var k = 0; k <  this.attrValueIdes.length; k++) {
              // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              let newObj = {};
              newObj.trE =  this.attrValueId[i];
              newObj.trEs =  this.attrValueIde[j];
              newObj.trEsk =  this.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var k = 0; k <  this.attrValueIdes.length; k++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          let newObj = {};
          newObj.trE =  this.attrValueId[i];
          newObj.trEs =  this.attrValueIde[j];
          newObj.trEsk =  this.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    },
    "attrValueIdes": function(newValue, oldValue) {
      this.tableDataList = [];
      if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            for (var k = 0; k <  this.attrValueIdes.length; k++) {
              // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
              let newObj = {};
              newObj.trE =  this.attrValueId[i];
              newObj.trEs =  this.attrValueIde[j];
              newObj.trEsk =  this.attrValueIdes[k];
              this.tableDataList.push(newObj);
            }
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes != undefined &&
           this.attrValueIdes.length > 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var k = 0; k <  this.attrValueIdes.length; k++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde != undefined &&
           this.attrValueIde.length > 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          for (var j = 0; j <  this.attrValueIde.length; j++) {
            // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
            let newObj = {};
            newObj.trE =  this.attrValueId[i];
            newObj.trEs =  this.attrValueIde[j];
            newObj.trEsk =  this.attrValueIdes[k];
            this.tableDataList.push(newObj);
          }
        }
      } else if (
         this.attrValueId != undefined &&
         this.attrValueId.length > 0 &&
        ( this.attrValueIde == undefined ||
           this.attrValueIde.length <= 0) &&
        ( this.attrValueIdes == undefined ||
           this.attrValueIdes.length <= 0)
      ) {
        for (var i = 0; i <  this.attrValueId.length; i++) {
          // this.tableDataList.push( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          //alert( this.attrValueId[i]+","+ this.attrValueIde[j]+","+ this.attrValueIdes[k]);
          let newObj = {};
          newObj.trE =  this.attrValueId[i];
          newObj.trEs =  this.attrValueIde[j];
          newObj.trEsk =  this.attrValueIdes[k];
          this.tableDataList.push(newObj);
        }
      }
      this.$forceUpdate();
    }
  },
  created() {
    this.getAllShopList();
    this.getGoodsInfo();
    this.getAllGroup();
    this.tableDataList=[];
  },
  methods: {
    getGoodsInfo(){
      getObj(this.$route.query.id).then(response=>{
        for(var i=0;i<response.data.goodsDetail.shopGoodsGroupGoodsList.length;i++){
         this.shopGrouptionsVal.push(response.data.goodsDetail.shopGoodsGroupGoodsList[i].groupId);
        }
        this.form=response.data.goodsDetail.shopGoods;
        this.form.status=response.data.goodsDetail.shopGoods.status.toString();
        this.form.goodSpecs=response.data.goodsDetail.shopGoodsSpecList;
        this.specs = response.data.goodsDetail.shopGoodsSpecList;
        var codeArray = this.form.mkCategoryCode.split("-");
        var i = 0;
        this.categoryCode = [];
        for(var code in codeArray){
          i++;
          this.categoryCode.push(codeArray.slice(0, i).join('-'));
        }
        // this.form.oringinalPrice = parseFloat(parseFloat(this.form.oringinalPrice)/100).toFixed(2)
        // this.form.currentPrice = parseFloat(parseFloat(this.form.currentPrice)/parseFloat(100)).toFixed(2)
        for(var i = 0;i<response.data.goodsDetail.shopGoodsImgList.length;i++){
          var imagePath = this.GLOBAL.imgBaseURL + response.data.goodsDetail.shopGoodsImgList[i].imagePath
          this.uploadFileList.push({"url":imagePath, status: 'finished'})
          this.imgs.push(response.data.goodsDetail.shopGoodsImgList[i].imagePath)
        }
        
         this.form.goodImgs = this.imgs;
        // this.form.specName = this.specs[0].name;
        // this.form.formStockQuantity = this.specs[0].stockQuantity;
        // this.form.formNetWeight  = this.specs[0].netWeight;
        // this.form.formNetWeightUnit  = this.specs[0].netWeightUnit;
        // this.form.formPrice  = parseFloat(parseFloat(this.specs[0].price)/100).toFixed(2)
        // this.form.formMemberPrice  = parseFloat(parseFloat(this.specs[0].memberPrice)/100).toFixed(2)
        // this.form.formMenchantPrice  = parseFloat(parseFloat(this.specs[0].menchantPrice)/100).toFixed(2)
        // if(this.specs.length >1){
        //   for(var i=1;i<this.specs.length;i++){
        //     var memberPrice = parseFloat(parseFloat(this.specs[i].memberPrice)/100).toFixed(2);
        //     var price = parseFloat(parseFloat(this.specs[i].price)/100).toFixed(2);
        //     var menchantPrice = parseFloat(parseFloat(this.specs[i].menchantPrice)/100).toFixed(2);
        //     this.specs[i].menchantPrice = menchantPrice;
        //     this.specs[i].price = price;
        //     this.specs[i].memberPrice = memberPrice;
        //     this.allComponents.push(this.specs[i])
        //   }
        // }
      for(var i=0;i<response.data.goodsDetail.shopGoodsSpecList.length;i++){
        this.price.push(parseFloat(parseFloat(response.data.goodsDetail.shopGoodsSpecList[i].price)/100).toFixed(2));
        this.memberPrice.push(parseFloat(parseFloat(response.data.goodsDetail.shopGoodsSpecList[i].memberPrice)/100).toFixed(2));
        this.menchantPrice.push(parseFloat(parseFloat(response.data.goodsDetail.shopGoodsSpecList[i].menchantPrice)/100).toFixed(2));
        this.stockQuantity.push(response.data.goodsDetail.shopGoodsSpecList[i].stockQuantity);
        
        
      }
      for(var i=0;i<response.data.shopGoodsAttrValue.length;i++){
          if(response.data.shopGoodsAttrValue[i].imageUrl!=undefined && response.data.shopGoodsAttrValue[i].imageUrl!=""
           && response.data.shopGoodsAttrValue[i].imageUrl.length>0){
          var imagePath = this.GLOBAL.imgBaseURL + response.data.shopGoodsAttrValue[i].imageUrl;
          this.uploadFileLists.push({"url":imagePath, status: 'finished'})
          this.imgss.push(response.data.shopGoodsAttrValue[i].imageUrl)
          }
      }
      if(response.data.shopGoodsAttr!=undefined && response.data.shopGoodsAttr.length==3){
        this.modelAttrId=response.data.shopGoodsAttr[0].modelAttrName;
        this.modelAttrIde=response.data.shopGoodsAttr[1].modelAttrName;
        this.modelAttrIdes=response.data.shopGoodsAttr[2].modelAttrName;

         
         for(var i=0;i<response.data.shopGoodsAttrValue.length;i++){
          if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[0].modelAttrId){
            this.attrValueId.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
          if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[1].modelAttrId){
            this.attrValueIde.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
          if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[2].modelAttrId){
            this.attrValueIdes.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
         //{attrValueName:response.data.shopGoodsAttrValue[i].modelAttrValueName,attrValueId:response.data.shopGoodsAttrValue[i].modelAttrValueId}
           
       }
      }else if(response.data.shopGoodsAttr!=undefined && response.data.shopGoodsAttr.length==2){
        this.modelAttrId=response.data.shopGoodsAttr[0].modelAttrName;
        this.modelAttrIde=response.data.shopGoodsAttr[1].modelAttrName;

        for(var i=0;i<response.data.shopGoodsAttrValue.length;i++){
          if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[0].modelAttrId){
            this.attrValueId.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
          if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[1].modelAttrId){
            this.attrValueIde.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
         //{attrValueName:response.data.shopGoodsAttrValue[i].modelAttrValueName,attrValueId:response.data.shopGoodsAttrValue[i].modelAttrValueId}
       }
      }else if(response.data.shopGoodsAttr!=undefined && response.data.shopGoodsAttr.length==1){
        this.modelAttrId=response.data.shopGoodsAttr[0].modelAttrName;
        for(var i=0;i<response.data.shopGoodsAttrValue.length;i++){
            if(response.data.shopGoodsAttrValue[i].modelAttrId==response.data.shopGoodsAttr[0].modelAttrId){
            this.attrValueId.push(response.data.shopGoodsAttrValue[i].modelAttrValueName);
          }
        }
      }
      });
    },
      testUser(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "划线价不能为空!",
          type: "error",
          direction: 10000
        });
        this.priceShow = false;
      } else {
          this.priceShow = true;
        
      }
    },
    testUser_a(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "在售价不能为空!",
          type: "error",
          direction: 10000
        });
        this.memberPriceShow = false;
      } else {
       
          this.memberPriceShow = true;
        
      }
    },
    testUser_b(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "成本价不能为空!",
          type: "error",
          direction: 10000
        });
        this.menchantPriceShow = false;
      } else {
          this.menchantPriceShow = true;
      }
    },
    testUser_c(value) {
      if (value == "" || value == undefined) {
        this.$message({
          showClose: true,
          message: "库存不能为空!",
          type: "error",
          direction: 10000
        });
        this.stockQuantityShow = false;
      } else {
       
          this.stockQuantityShow = true;
        
      }
    },
   initialize(val) {
      if (val == true) {
        getByModelList(this.form.shopId).then(response => {
          this.options = response.data;
          
        });
      }
    },
    initialize_a(val) {
      if (val == true) {
        getByModelList(this.form.shopId).then(response => {
          this.options_a = response.data;
        
        });
      }
    },
    initialize_b(val) {
      if (val == true) {
        getByModelList(this.form.shopId).then(response => {
          this.options_b = response.data;
         
        });
      }
    },
  

       remoteMethod(val) {
      this.attrValueId = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList.modelAttrName=val;
        this.goodsModelByList.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList).then(response => {
        });
        this.goodsModelValCondition.attrValueName = val;
        this.goodsModelValCondition.shopId=this.form.shopId;
      }
    },

    initializeEs(val){
      if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition).then(response => {
          this.goodsModelVal.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones = response.data.selectByList;
        });
      }
    },



     remoteMethode(val) {
      if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal.shopId=this.form.shopId;
          this.goodsModelVal.attrValueName=[];
          this.goodsModelVal.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal).then(response => {});
      }
    },

    //-----------------
   remoteMethod_a(val) {
      this.attrValueIde = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList_a.modelAttrName=val;
        this.goodsModelByList_a.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList_a).then(response => {
        });
        this.goodsModelValCondition_a.attrValueName = val;
        this.goodsModelValCondition_a.shopId=this.form.shopId;
      }
    },

 initializeEs_a(val){
      if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition_a).then(response => {
          this.goodsModelVal_a.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones_a = response.data.selectByList;
        });
      }
    },

    remoteMethode_a(val) {
       if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal_a.shopId=this.form.shopId;
          this.goodsModelVal_a.attrValueName=[];
          this.goodsModelVal_a.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal_a).then(response => {});
      }
    },
    //----------------------
   
      remoteMethod_b(val) {
      this.attrValueIdes = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        this.goodsModelByList_b.modelAttrName=val;
        this.goodsModelByList_b.shopId=this.form.shopId;
        addGoodsModel(this.goodsModelByList_b).then(response => {
        });
        this.goodsModelValCondition_b.attrValueName = val;
        this.goodsModelValCondition_b.shopId=this.form.shopId;
      }
    },

    initializeEs_b(val){
       if(val==true){
        selectByGoodsModelVal(this.goodsModelValCondition_b).then(response => {
          this.goodsModelVal_b.modelAttrId = response.data.selectByName.modelAttrId;
          this.optiones_b = response.data.selectByList;
        });
      }
    },

    remoteMethode_b(val) {
       if (val == "" || val == undefined || val.length==0) {
      } else {
          this.goodsModelVal_b.shopId=this.form.shopId;
          this.goodsModelVal_b.attrValueName=[];
          this.goodsModelVal_b.attrValueName.push(val);
          addGoodsModelVal(this.goodsModelVal_b).then(response => {});
      }
    },
    getAllGroup(){
      goodsGroup().then(response=>{
        this.shopGrouptions=response;
      })
    },
    next() {
      if(this.active ==0){
        var flag = this.checkBaseInfo();
      }else if(this.active == 1){
        var flag = this.checkDescInfo();
        // console.log('created == I got the data:', JSON.stringify(this.allComponents))
        
      }
      if(flag){
        if (this.active++ > 2) this.active = 0;
      }
      
    },
    prev(){
      --this.active;
      if(this.active < 0)this.active =0;
    },
    maxLimit(){
      return this.maxLimit;
    },
    getCategoryList(shopId){
      this.listQuery.shopId = shopId;
      fetchTree(this.listQuery).then(data => {
        this.categoryOptions = data;
      });
    },
    getPayMethodList() {
      getPicklist(this.picklistCode)
        .then(response => {
          this.payMethodOptions = response.data;
        })
    },
    getAllShopList() {
      getAllShopList()
        .then(response => {
          this.shopOptions = response.data;
        })
    },
    async create(formName) {
      this.specs = [];
      var spec = {"name":this.form.specName,"stockQuantity":this.form.formStockQuantity,"netWeight":this.form.formNetWeight,"netWeightUnit":this.form.formNetWeightUnit,"price":this.form.formPrice,"memberPrice":this.form.formMemberPrice,"menchantPrice":this.form.formMenchantPrice};
      this.specs.push(spec);
      this.specs.concat(this.allComponents);
      const set = this.$refs;
      for(var i=0;i<this.allComponents.length;i++){
        var flag = await this.$refs.child[i].validateForm();
        if(!flag.valid){
          return false;
        }
        this.specs.push(flag.data);
      }

        if(this.imgss!='' && this.imgss.length!=0){
        if(this.imgss.length==this.attrValueId.length){
         set[formName].validate(valid => {
        if (valid) {
          this.form.goodImgs = this.imgs;
          this.form.goodsSpecImgs = this.imgss;
          this.form.attrValueId=this.attrValueId;
          this.form.attrValueIde=this.attrValueIde;
          this.form.attrValueIdes=this.attrValueIdes;
          this.form.modelAttrId=this.modelAttrId;
          this.form.modelAttrIde=this.modelAttrIde;
          this.form.modelAttrIdes=this.modelAttrIdes;
          this.form.price=this.price;
          this.form.memberPrice=this.memberPrice;
          this.form.menchantPrice=this.menchantPrice;
          this.form.stockQuantity=this.stockQuantity;
          this.form.goodSpecs = this.specs;
          this.loading = true;
          this.form.shopGrouptionsValForm=this.shopGrouptionsVal;
          putObj(this.form.goodsId,this.form)
            .then(() => {
              this.loading = false;
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              });
              this.$store.dispatch('delVisitedViews', {path:"/shopManager/goodManager/goodsEdit"})
              this.$router.push('/shopManager/goodManager/goodsManager');
            }).catch(() => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
      
        }else{
          this.$notify({
          title: "错误",
          message: "一级规格图必须与所选一级规格值匹配!",
          type: "error",
          duration: 2000
        });
        }
      }else{
         this.$notify({
          title: "错误",
          message: "一级规格图必填!",
          type: "error",
          duration: 2000
        });
      }
     
    },
     handleEditChange (file, fileList) {
      this.hideUploadEdit = fileList.length >= this.attrValueId.length;
    },
    handleAvatarSuccess(res, file, fileList) {
        this.uploadFileList = fileList;
        --this.maxLimitNum;
        if(this.maxLimitNum <= 0) this.isDisabled = true;
        this.imgs.push(res.data);
    },
    handleAvatarSuccesss(res, file, fileList) {
        this.imgss.push(res.data);
        this.uploadFileLists = fileList;
    },
    beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG || !file.type) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isJPG) && isLt2M;
    },
    beforeAvatarUploads(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG || !file.type) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList){
      if(file != null){
        if(file.response == undefined){
          if(file.url != undefined){
            var fileName = file.url;
            if(file.url.indexOf(this.GLOBAL.imgBaseURL) > -1){
              fileName = file.url.substring(this.GLOBAL.imgBaseURL.length,file.url.length);
            }
            var index = this.imgs.indexOf(fileName);
            if (index > -1) {
              this.imgs.splice(index, 1);
            }
          }
          
        }else{
          var fileName = file.response.data;
          var index = this.imgs.indexOf(fileName);
          if (index > -1) {
              this.imgs.splice(index, 1);
          }
        }
      console.log(this.imgs)
      this.maxLimitNum++;
      this.isDisabled = false;
      }
    },
    handleRemoves(file, fileList) {
     
      this.hideUploadEdit = fileList.length >= this.attrValueId.length;
      if(file != null){
        if(file.response == undefined){
          if(file.url != undefined){
            var fileName = file.url;
            if(file.url.indexOf(this.GLOBAL.imgBaseURL) > -1){
              fileName = file.url.substring(this.GLOBAL.imgBaseURL.length,file.url.length);
            }
            var index = this.imgss.indexOf(fileName);
            if (index > -1) {
              this.imgss.splice(index, 1);
            }
          }
          
        }else{
          var fileName = file.response.data;
          var index = this.imgss.indexOf(fileName);
          if (index > -1) {
              this.imgss.splice(index, 1);
          }
        }
      console.log(this.imgss)
      this.maxLimitNums++;
    
      }
    },
    onEditorChange({editor, html, text}){
        this.content = html
    },
    async addGoodSpec(){
      this.allComponents.push({})
    },
    //删除子组件
    remove(index){
      console.log("splice:"+index);
      this.allComponents.splice(index,1); 
      console.log('deleted:', JSON.stringify(this.allComponents))
    },
    //  get the data from child
    getData: function (val) {
      let index = val.index
      this.allComponents[index] = val.data
      console.log('I got the data:', JSON.stringify(this.allComponents))
    },
    onCategoryChange(item){
      console.log(this.categoryCode)
      // console.log(item, this.$refs['goodCate'].currentLabels)
      var labels = this.$refs['goodCate'].currentLabels;
      this.form.mkCategoryCode = item[item.length - 1]
      this.form.categoryName = labels[labels.length - 1]
    },
    checkBaseInfo(){
      if(this.form.name =="" || this.form.name ==undefined){
        this.$message.error('商品名称不能为空');
        return false;
      }

      if(this.form.title =="" || this.form.title ==undefined){
        this.$message.error('商品长标题不能为空');
        return false;
      }
      if(this.form.salesPromotion =="" || this.form.salesPromotion ==undefined){
        this.$message.error('商品卖点不能为空');
        return false;
      }
      if(this.form.simpleTitle =="" || this.form.simpleTitle ==undefined){
        this.$message.error('商品短标题不能为空');
        return false;
      }
      if(this.form.mkCategoryCode =="" || this.form.mkCategoryCode ==undefined){
        this.$message.error('商品分类不能为空');
        return false;
      }
      if(this.form.status =="" || this.form.status ==undefined){
        this.$message.error('商品状态不能为空');
        return false;
      }
      if(this.shopGrouptionsVal=="" || this.shopGrouptionsVal==undefined){
         this.$message.error('商品分组不能为空');
        return false;
      }
      if(this.imgs.length == 0){
        this.$message.error('商品图片不能为空');
        return false;
      }
      return true;
    },
    checkDescInfo(){
      if(this.form.description == "" || this.form.description == undefined){
          this.$message.error('商品详情不能为空');
         return false;
      }
       return true;
    },
    shopChange(event,item){
      var shopId = event;

      this.getCategoryList(shopId);
    },
    newEditorbeforeupload(file){                       
     const isJPG = file.type === 'image/jpeg' ||file.type ===  'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG或PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;                                            
    },
    //上传图片回调 
    newEditorSuccess(response, file, fileList){
      if(response.status===0){
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill 
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        let imgUrl = this.GLOBAL.imgBaseURL + response.data;
        quill.insertEmbed(length, 'image', imgUrl)
        // 调整光标到最后
        quill.setSelection(length + 1)   
      }
    }
  }
  
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .steps{
    margin-left: 15%;
    margin-bottom: 5%;
  }
  .editor{
    height: 400px;
  }
  .footerBtn{
    margin-top: 10%;
  }
  table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  width: 100%;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
  text-align: center;
}
.hide .el-upload--picture-card {
	display: none;
}
</style>